<template>
  <div>
        <div class="div111">
            <p class="p11">
                <Header11>{{itemObj.nm}}</Header11>
                <Header22></Header22>
                
            </p>
            <ul class="list11">
                <li class="li111">
                    <div class="diva">
                        <img :src="itemObj.img" /> 
                    </div>
                    <div class="divb">
                        <p>{{itemObj.nm}}</p>
                        <p>{{itemObj.enm}}</p>
                        <p>
                            <i>{{itemObj.sc}} </i>
                            <span>({{itemObj.snum}}人评)</span>
                        </p>
                        <p>{{itemObj.cat}}</p>
                        <p>{{itemObj.src}}/{{itemObj.episodeDur}}</p>
                        <p>{{itemObj.pubDesc}}</p>
                    </div>
                </li>           
            </ul>   
           
                  <!-- 显示 日期的数据 -->
                <van-tabs @click="getData">
                <van-tab
                    v-for="(item, index) in dateArr"
                    :key="index"
                    :title="item.date | format"
                >
                </van-tab>
                </van-tabs>
                <div class="item-title"></div>
                      <div class="div333">
                    <span>全城</span>|
                    <span>品牌</span>|
                    <span>特色</span>
                </div>
                <!-- 显示 当天的影院列表 -->
                <div v-for="(item, index) in cinemaArr" :key="index" class="c_item">
                
                    <p>
                        <span class="ccc1">{{item.nm}} </span> <span class="ccc3"> {{item.sellPrice}}</span><span class="ccc4">元起</span>
                    </p>
                    <p>{{item.addr}}</p>
                    <p>
                        <span v-for="cc in item.labels" :key="cc.name" :style="{color:cc.color,border:'1px solid'+cc.color}">{{cc.name}}</span>
                    </p>
                    <p>
                        <!-- <span class="ccc2" v-if="ii.promotion.cardPromotionTag !=''"></span> -->
                        {{item.promotion.cardPromotionTag}}
                    </p>
                    <p>近期场次：{{item.showTimes}}</p>
                </div>
     
             
            <ul class="list112" >
                <li class="aaa1" v-for="i in neirong" :key="i.id">
                 
                </li>
            </ul> 
        </div>
  </div>
</template>

<script>
import Header11 from"../../components/Header11.vue";
import Header22 from"../../components/Header22.vue";
import axios from "axios";
export default {
    name:'Item',
    data:function(){
        return{
            id:0,
            itemObj:{},
            neirong:[],
            cinemaArr: [], //影院信息
            dateArr: [], //保存日期的数据
        }
    },
    components:{
        Header11,Header22,
    },
    mounted(){
        console.log(this.$route);
        this.id=this.$route.params.id;
        axios.get("/api/mtrade/mmdb/movie/v5/"+this.id +".json?optimus_uuid=3084E8D0146211ECA50A477D88250D251D93073CCDCC41D9A4CAC797521EC42D&optimus_risk_level=71&optimus_code=10").then((res)=>{
            console.log(res);
            var data = res.data.data.movie;
            data.img=data.img.replace('w.h','148.208');
            this.itemObj=data

        });
        axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=1356063&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.dateArr = res.data.data.dates;
        //获取影院数据
        this.getCinemaArr(this.dateArr[0].date);
      });
  },
  components: {
    Header11,
    Header22, 
  },
  methods: {
    //date 某一天的字符串
    getCinemaArr: function (date) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=1356063&serviceId=-1&stationId=-1&showDate=" +
            date +
            "&cityId=30&ci=30"
        )
        .then((res) => {
          console.log(res);
          this.cinemaArr = res.data.data.cinemas;
        });
    },
    getData: function (name, title) {
      console.log(name, title); //使用title 可以接收到  日期的数据

      //再一次获取数据
      this.getCinemaArr(this.dateArr[name].date);
    },
  },

  //日期时间的过滤器,将年月日转为  周几，前三天需要写成是 今天  明天  后天
  filters: {
    format(value) {
      //console.log(value);
      var arr = value.split("-");
      //console.log(arr);
      var str = ""; //输出的 带 今天明天后天的字符串
      var jintian = ["今天", "明天", "后天"];
      //将 传过来的日期转为 date的格式
      var d1 = new Date(value);
      //获取当前时间的年月日
      var dd = new Date();
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var d2 = new Date(y + "-" + m + "-" + d);
      //求今天明天后天
      var iday = parseInt(parseInt(d1 - d2) / 1000 / 60 / 60 / 24);
      // console.log(iday);

      //判断 是不是  今天明天后天，如果不是，按周几来显示
      if (jintian[iday] != undefined) {
        str = jintian[iday];
      } else {
        //显示周几
        str = `周${"日一二三四五六".charAt(d1.getDay())}`;
      }
      //console.log(str);
      return (str += `${arr[1]}月${arr[2]}日`);
    },
  },
};
</script>

<style>
html,body{
    margin: 0;
    padding: 0;
}
.list11{
    /* width: 100%; */
    height: 5rem;
    background: rgba(0, 0, 0, 0.7);
   
}

.li111{
    
    height:4rem;
    display: flex;
    box-sizing: border-box;
    padding: .506667rem .4rem .506667rem .8rem;
    
}
.diva{
    /* width: 148px; */
    height: 207px;
    /* border: 1px solid #ccc; */
}

.divb{
    color: #fff;
    width: 8rem;
    height: 207px;
    margin-left: .3rem;
    text-align: left;
}
.diva img{
    width: 100%;
}
.divb p:nth-child(1){
    font-size: 20px;
    font-weight: 700;
    
}

.divb p:nth-child(2){
    width: 100%;

    font-size: 12px;
    color:#c0c0c2;
    margin-top:.2rem;
    
}
.divb p:nth-child(3){
    margin-top:.2rem;

}
.divb p:nth-child(3) i{
    font-size: 16px;
    color:#fc0;
  
    font-weight: 700;    
  

}
.divb p:nth-child(3) span{
    font-size: 12px;
    color:#c0c0c2;
    font-weight: 700;
   
    
}
.divb p:nth-child(4){
    width: 100%;

    font-size: 12px;
    color:#c0c0c2;
    font-weight: 700;
    margin-top:.2rem;
    
}
.divb p:nth-child(5){
    width: 100%;

    font-size: 12px;
    color:#c0c0c2;
    margin-top:.2rem;    
    font-weight: 700;

}
.divb p:nth-child(6){
    width: 100%;

    font-size: 12px;
    color:#c0c0c2;
    font-weight: 700;
    margin-top:.2rem;
    
}
.van-tabs__line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 70px;
  height: 3px;
  background-color: #ee0a24;
  border-radius: 3px;
}
.c_item {
  height: 80px;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
.c_title {
  font-size: 18px;
  font-weight: bold;
}
.div222{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    display: flex;
    text-align: left;
    justify-content: space-around;
    border-bottom: 1px solid rgba(204, 204, 204, 0.384);
}
.div333{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(204, 204, 204, 0.384);
}
.c_item{
    width: 100%;
    height: 3rem;
    border-bottom: 1px solid rgba(204, 204, 204, 0.384);
    text-align: left;
    padding-left: .3rem;
    
    
}

.c_item p:nth-child(1){
    font-size: 16px;
    color: #000;
    margin-top: .3rem;
    display: flex;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}
.ccc1{
    width: 80%;
    font-size: 18px;
    font-weight: bold;
}
.ccc3{
    font-size: 20px;
    /* margin-left: 3rem; */
    color: red;

}
.ccc4{
    
    font-size: 12px;
    color: red;
    margin-top: .1rem;
    
}
.c_item p:nth-child(2){
    font-size: 12px;
    color: #666;
    margin-top: .3rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}
.c_item p:nth-child(3){
    font-size: 14px;
    color: #000;
    margin-top: .1rem;
}
.c_item p:nth-child(4){
    font-size: 12px;
    color: #000;
    margin-top: .2rem;
}
.ccc2{
    display: inline-block;
    height: .37rem;
    width: .5rem;
    background: url();
    background-size: cover;
    background-size: 100% 100%;
}

</style>